<template>
	<view class="container">
		<view v-for="(item, index) in list" :key="item.id" class="item">
			<view class="title">
				{{index + 1}}.{{item.title}}
			</view>
			<view class="value">
				<u-rate v-if="item.type === 'rank5'" :count="5" size="40" v-model="item.value"></u-rate>
				<u-rate v-else-if="item.type === 'rank10'" :count="10" size="40" v-model="item.value"></u-rate>
				<view v-else-if="item.type === 'select'">
					<u-radio-group v-model="item.value">
						<u-radio
							@change="radioChange($event, item, optionIndex)"
							v-for="(option, optionIndex) in item.list" :key="optionIndex" 
							:name="option.name"
						>
							{{option.name}}
						</u-radio>
					</u-radio-group>
				</view>
				<view v-else-if="item.type === 'multiple'">
					<u-checkbox-group >
						<u-checkbox 
							v-model="option.checked" 
							v-for="(option, optionIndex) in item.list" :key="optionIndex" 
							:name="option.name"
						>{{option.name}}</u-checkbox>
					</u-checkbox-group>
				</view>
				<u-input v-else v-model="item.value" />
			</view>
		</view>
		<view class="app-action-view">
			<x-button title="确定" @click="addClick"></x-button>
		</view>
		
	</view>
</template>

<script>
	import XButton from '@/components/x-button.vue'
	import { getSheetItem, addSurveyAnswer, getSheet } from '@/api/common.js'
	export default {
		components: {
			XButton
		},
		data() {
			return {
				list: []
			}
		},
		onLoad() {
			this.getSheet();
			// getSheet().then(res => {
			// 	console.log(res)
			// 	this.list = res.data.items.map(x => {
			// 		if (x.type === 'select' || x.type === 'multiple') {
			// 			x.list = x.options.split('|').map(option => {
			// 				return {
			// 					name: option,
			// 					checked: false
			// 				}
			// 			})
			// 		} else if (x.type === 'rank5' || x.type === 'rank10') {
			// 			x.value = 0;
			// 		}
			// 		return x
			// 	})
			// })
		},
		methods: {
			getSheet() {
				uni.showLoading({})
				getSheetItem().then(res => {
					console.log(res);
					uni.hideLoading();
					this.list = res.data.content.map(x => {
						if (x.type === 'rank5' || x.type === 'rank10') {
							x.value = 0;
						}
						return x;
					});
				}).catch(err => {
					uni.hideLoading();
				})
			},
			
			addClick() {
				// return
				let data = {
					sheetId: 1,
				}
				for (let index in this.list) {
					let item = this.list[index];
					if (item.type === 'multiple') {
						const valueList = []
						const indexList = []
						for (let mIndex in item.list) {
							let mOpiton = item.list[mIndex]
							if (mOpiton.checked) {
								valueList.push(mOpiton.name)
								indexList.push(mIndex)
							}
						}
						if (valueList.length === 0) {
							this.$u.toast('请填写满意度2')
							return;
						} else {
							data[`answers[${index}].itemId`] = item.id;
							// data[`answers[${index}].optionIndex`] = indexList.join('|');
							data[`answers[${index}].value`] = valueList.join('|');
						}
					} else {
						data[`answers[${index}].itemId`] = item.id;
						if (item.type === 'select') {
							data[`answers[${index}].optionIndex`] = item.optionIndex;
						} else {
							data[`answers[${index}].optionIndex`] = item.value;
						}
						data[`answers[${index}].value`] = item.value;
						if (!item.value) {
							console.log(item)
							this.$u.toast('请填写满意度1')
							return;
						}
					}
				}
				console.log(data);
				addSurveyAnswer(data).then(res => {
					console.log(res);
					this.$u.toast('提交成功');
					setTimeout(function(){
						uni.navigateBack()
					},500)
				})
			},
			
			// 选中任一radio时，由radio-group触发
			radioChange(e, item, optionIndex) {
				console.log(item)
				console.log(e);
				console.log(optionIndex)
				item.optionIndex = optionIndex
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $app-page-bg-color;
	}
	
	.container{
		display: flex;
		flex-direction: column;
		padding: 0 $app-page-padding;
	}
	
	.item{
		margin: 15rpx 0;
		padding: 20rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		
		.title{

		}
		
		.value{
			margin-top: 20rpx;
		}
	}
	
</style>
